<template>
  <!-- 登录页面 成功则跳入home 不成功则提示 -->
  <div class="login">
    <el-container>
      <!-- 导航1 -->
      <el-header class="header">
        <el-row>
          <el-menu mode="horizontal" background-color="#545c64" text-color="#fff" class="header_navbar">
            <el-col :span="8">
              <!-- 导航条logo -->
              <el-menu-item index="1" class="logo_box">
                <img src="../../assets/librarian/image/lib_logo.png" class="logo" />
              </el-menu-item>
            </el-col>
            <el-col :span="8">
              <!-- 导航条搜索框 -->
              <el-menu-item index="2">
                <el-input placeholder="Search here" clearable>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-menu-item>
            </el-col>
            <!-- 导航条退出按钮 -->
            <el-col :span="8">
              <el-menu-item index="3" class="logout_box">
                <el-button type="info" @click="backToIndex">Back</el-button>
              </el-menu-item>
            </el-col>
          </el-menu>
        </el-row>
      </el-header>
      <!-- 主体区 -->
      <el-main>
        <div class="login_box">
          <div class="avator_box">
            <!-- <img src="../assets/lib_logo.png" alt="" /> -->
          </div>
          <div class="login_form">
            <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" label-width="100px">
              <!-- 用户名 -->
              <el-form-item label="Username:" prop="userName">
                <el-input v-model="loginForm.userName" prefix-icon="el-icon-user-solid"></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="PassWord:" prop="password">
                <el-input v-model="loginForm.password" type="password" prefix-icon="iconfont icon-3702mima"></el-input>
              </el-form-item>
              <small><a href="#">Forget password?</a></small>
              <!-- 登录按钮 -->
              <div>
                <el-button type="primary" size="medium" @click="login">LOG IN</el-button>
              </div>
            </el-form>
          </div>
        </div>
      </el-main>
      <!-- 底部 -->
      <el-footer>@2020 XDedu</el-footer>
    </el-container>
  </div>
</template>

<script>
//引入qs序列化
import qs from 'qs'

  export default {
    data() {
      return {
        // 表单对象
        loginForm: {
          userName: 'test',
          password: 'test'
        },
        // 表单验证
        loginRules: {
          // 验证用户名
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          // 验证密码
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
          ]
        },
      }
    },
    created() {

    },
    methods: {
      // 表单预验证
      login() {
        this.$refs.loginFormRef.validate(async valid => {
          if (!valid) return;
          // 发起登录请求
          this.$http({
            url:'librarian/login',
            method:'POST',
            data:qs.stringify({
              userName:this.loginForm.userName,
              password:this.loginForm.password
            })
          }).then(res=>{
            this.$message.success('登录成功')
            window.sessionStorage.setItem("token",'123456')
            this.$router.push("/home");
          }).catch(err=>{
            console.log(err.message)
            this.$message.error('登录失败')
          })

        })
      },
      // 点击注册，跳转到注册页面
      goSignUp() {
        this.$router.push("/register");
      },
      // 返回首页
      backToIndex(){
        this.$router.push('/index')
      },
    },
  };
</script>

<style lang="less" scoped>
  /*******main start*******/
  // 登录部分整体框架 = 图片 + 表单
  .login_box {
    width: 400px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  // 图片
  .avator_box {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  // 登录表单
  .login_form {
    height: 280px;
    width: 100%;
    padding-top: 20px;
    position: absolute;
    border-top: solid 40px #545c64;
    border-bottom: solid 40px #545c64;
    border-left: 1px solid #545c64;
    border-right: 1px solid #545c64;
    border-radius: 10px;
    top: 20%;
    left: 50%;
    transform: translate(-50%);

    .el-form {
      padding: 20px;

      a {
        color: #36b4cc;
      }

      .el-button {
        width: 200px;
        margin-top: 30px;
        position: absolute;
        color: #fff;
        font-size: 15px;
        left: 50%;
        transform: translate(-50%);
      }
    }
  }

  /*******main end*******/
</style>
